<script setup lang="ts">
import ArrangeTemplate from './ArrangeTemplate/index.vue'
import EducationConfig from './EducationConfig/index.vue'
import NotifyConfig from './NotifyConfig/index.vue'
import TimeTemplate from './TimeTemplate/index.vue'

defineOptions({
  name: 'BusinessRules',
})

const route = useRoute()
const router = useRouter()
const activeKey = ref('TimeTemplate')
const selectedKeys = ref(['TimeTemplate'])

watchEffect(() => {
  activeKey.value = route.query.tabKey as string || 'TimeTemplate'
  selectedKeys.value = [activeKey.value]
})

const menuData = [
  {
    title: '常用时间段',
    key: 'TimeTemplate',
  },
  {
    title: '上课期段',
    key: 'ArrangeTemplate',
  },
  {
    title: '消息通知',
    key: 'NotifyConfig',
  },
  {
    title: '教务配置',
    key: 'EducationConfig',
  },
]

const onMenuNodeSelect = (key: string) => {
  router.replace({ path: route.path, query: { tabKey: key } })
}
</script>

<template>
  <ProPage title="业务规则配置" description="对系统运行业务规则进行自定义配置" flex-table>
    <a-row align="stretch" class="h-full">
      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="150px" class="h-full overflow-hidden">
        <a-menu
          v-model:selected-keys="selectedKeys"
          class="menu"
          auto-open
        >
          <a-menu-item v-for="item in menuData" :key="item.key" @click="onMenuNodeSelect(item.key)">
            {{ item.title }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-divider direction="vertical" />
      <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full overflow-hidden">
        <TimeTemplate v-if="activeKey === 'TimeTemplate'" />
        <ArrangeTemplate v-else-if="activeKey === 'ArrangeTemplate'" />
        <NotifyConfig v-else-if="activeKey === 'NotifyConfig'" />
        <EducationConfig v-else-if="activeKey === 'EducationConfig'" />
      </a-col>
    </a-row>
  </ProPage>
</template>

<style lang="less" scoped>

</style>
